<template>
	<div class="report-box" @click.stop="visible = false" id="pdfDom" v-loading="loading"
		element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="search-box content-fade-upper" style="position: relative; z-index: 1200">
			<input-angle style="z-index: 6; width: 10%; margin-left: 1%">
				<a-select v-model:value="dateSlc" @select="handleDateSlc" placeholder="请选择" style="width: 100%">
					<a-select-option v-for="(item, index) in dateList" :key="index" :label="item.label"
						:value="item.value">{{
            item.label }}</a-select-option>
				</a-select>
			</input-angle>
			<input-angle style="z-index: 6; margin-left: 1%">
				<el-date-picker v-model="date1" type="date" placeholder="请选择"
					:disabled-date="(current) => disabledDateStart(current, 1)" @change="dateSlcFunc(1, date1)"
					v-if="dateSlc == 1" />
				<el-date-picker v-model="date1" type="week" placeholder="请选择" @change="dateSlcFunc(2, date1)"
					:format="weekStart + ',' + weekEnd" v-if="dateSlc == 2" />
				<el-date-picker v-model="date1" type="month" placeholder="请选择" @change="dateSlcFunc(3, date1)"
					v-if="dateSlc == 3" />
				<el-date-picker v-model="date1" type="year" placeholder="请选择" @change="dateSlcFunc(dateSlc, date1)"
					v-if="dateSlc > 3" />
			</input-angle>

			<input-angle style="z-index: 6; width: 10%; margin-left: 1%">
				<a-select ref="select" v-model:value="nodeId" style="width: 100%" placeholder="全部区域"
					@select="handleAreaSelect">
					<a-select-option v-for="(item, index) in area" :key="index" :label="item.label"
						:value="item.value">{{
            item.label }}</a-select-option>
				</a-select>
			</input-angle>
			<el-button style="margin-left: 1%; z-index: 999" type="primary" @click="clickSearch">查询</el-button>
			<div class="types_wrap">
				<el-button type="success" plain style="margin-left: 1%; z-index: 999"
					@click.stop="exportWord(1)">导出交通运行情况</el-button>
				<el-button type="success" plain style="margin-left: 2%; z-index: 999"
					@click.stop="exportWord(2)">导出路网现状</el-button>
			</div>
			<el-button style="margin-left: 1%; z-index: 999" @click="resetting">重置</el-button>
		</div>
		<left-chart v-show="isShow" ref="leftContent" style="float: left" :titleSet="titleSet"></left-chart>
		<right-table ref="rightConten" :table-data="rightContent" style="float: right"></right-table>
	</div>
</template>

<script>
	import {
		defineComponent,
		onMounted,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import Docxtemplater from 'docxtemplater';
	import PizZip from 'pizzip';
	import JSZipUtils from 'jszip-utils';

	import html2canvas from 'html2canvas';
	import JsPDF from 'jspdf';
	import htmlToPdf from '@/utils/htmlToPdf';

	import {
		saveAs
	} from 'file-saver';
	import inputAngle from '../basic/components/inputAngle.vue';
	import leftChart from './components/leftChart.vue';
	import rightTable from './components/rightTable.vue';
	import {
		formatToDateTime
	} from '@/utils/dateUtil';
	import {
		getYdzsList,
		getYdzsChartInfo,
		getExportData,
		getExportDataNew,
		getword,
		getYdzsChartInfo2,
		getYdzsList2,
		getYdzsRush
	} from '@/api/report';
	import customDatePicker from '@/components/customDatePicker';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import dayjs from 'dayjs';
	import tSelect from '@/components/tSelect';
	export default defineComponent({
		// eslint-disable-next-line vue/no-unused-components
		components: {
			leftChart,
			rightTable,
			customDatePicker,
			tSelect,
			inputAngle
		},
		setup() {
			const area = [{
					value: '9110',
					label: '行政总区域',
				},
				{
					value: '9317',
					label: '兰山区',
				},
				{
					value: '9353',
					label: '河东区',
				},
				{
					value: '9318',
					label: '罗庄区',
				},
			];
			const state = reactive({
				leftContent: null,
				rightContent: [],
				date: null,
				areaName: '行政总区域',
				isShow: false,
				loading: false,
				nodeId: '9110',
				datepick: [],
				visible: false,
				titleSet: '周',
				dateList: [{
						value: 1,
						type: 'day',
						label: '日',
					},
					{
						value: 2,
						type: 'week',
						label: '周',
					},
					{
						value: 3,
						type: 'month',
						label: '月',
					},
					{
						value: 4,
						type: 'jd',
						label: '一季度',
					},
					{
						value: 5,
						type: 'jd',
						label: '二季度',
					},
					{
						value: 6,
						type: 'jd',
						label: '三季度',
					},
					{
						value: 7,
						type: 'jd',
						label: '四季度',
					},
					{
						value: 8,
						type: 'preYear',
						label: '上半年',
					},
					{
						value: 9,
						type: 'nextYear',
						label: '下半年',
					},
					{
						value: 10,
						type: 'year',
						label: '年度',
					},
				],
				dateSlc: 2,
				date1: dayjs().endOf('week'),
				weekStart: '',
				weekEnd: '',
				queryParams: {
					"type": "0", //  必填，类型，		0:日；1：周；2：月；3：第一季度；4：第二季度；5：第三季度；6：第四季度；7：上半年；8：下半年；9：年报；
					"startDate": dayjs().endOf('day').format("YYYY-MM-DD"), // 日、周 该字段必填
					"endDate": "", // 周必填
					"month": "", // 月必填
					"year": "" // 各个季度、上下半年、年报必填
				},
				setAreaCongest: {
					'兰山区': 'ls',
					'河东区': 'hd',
					'罗庄区': 'lz',
					'行政总区域': 'all',
				},
				setLegendData: {
					'1': ['早高峰', '午高峰', '晚高峰'],
					'2': ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					'4': ['第一月', '第二月', '第三月'],
					'5': ['四月', '五月', '六月'],
					'6': ['七月', '八月', '九月'],
					'7': ['十月', '十一月', '十二月', ],
					'8': ['一月', '二月', '三月', '四月', '五月', '六月'],
					'9': ['七月', '八月', '九月', '十月', '十一月', '十二月', ],
					'10': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', ]
				}
			});
			let nowType = state.dateSlc;
			const initData = async () => {
				const startDate = formatToDateTime(state.date?.pitchData.startTime, 'YYYY-MM-DD');
				const endDate = formatToDateTime(state.date?.pitchData.endTime, 'YYYY-MM-DD');
				getYdzsList2(state.queryParams).then((res1) => {
					state.rightContent = res1.slice(0, 10);
				});
				let worddata = {
					type: state.queryParams.type * 1 + 1,
					date: state.queryParams.startDate.replace(/-/g, "")
				}
				// getword(worddata).then(() => {});
				const res2 = await getYdzsChartInfo2({
					...state.queryParams,
					areaArr: state.areaName == '行政总区域' ? '兰山区,罗庄区,河东区' : state.areaName,
				});
				state.isShow = true;

				state.leftContent.chart(res2, state.queryParams.type);
				// console.log(state.queryParams, 'chart');
			};


			const exportWord = async (type) => {
				state.loading = true;
				let docName = ''; // 声明变量，保证两种情况都能访问
				if (type == 2) {
					docName = '/api/upload/download/file/exportdata?fileName=report.docx'; // 这里路径根据实际情况修改
					downloadFile(docName);
					state.loading = false;
				} else {
					let datanew = {
						...state.queryParams,
						type: String(nowType - 1),
						areaArr: state.areaName == '行政总区域' ? '兰山区,罗庄区,河东区' : state.areaName,
					}
					datanew.type = (datanew.type * 1 + 1) + ''
					getExportDataNew(datanew).then((res) => {
						state.loading = false;
						if (res.hasFile) {
							downloadFile(res.saveFile);
						} else {
							ElMessage({
								message: '数据未生成',
								type: 'warning',
							});
						}
					}).catch(() => {
						state.loading = false;
					});
				}
			};
			// **下载文件方法**
			const downloadFile = (fileUrl) => {
				const a = document.createElement("a");
				a.href = `http://60.217.23.241:39999${fileUrl}`;
				a.download = "下载啦.docx"; // 指定下载文件名
				a.style.display = "none"; // 隐藏 a 标签
				document.body.appendChild(a);
				a.click(); // 触发下载
				a.remove(); // 下载完后移除
			};

			onMounted(() => {
				dateSlcFunc(2, );
			});

			const disabledDateStart = (current, type) => {
				switch (type) {
					case 1:
						return current.getTime() > Date.now() - 8.64e6
						break;
				}
			}

			const dateSlcFunc = (type, val) => {
				let getDateType = type,
					dateVal = dayjs(val).endOf('day'),
					dateValFormat = '';
				state.queryParams = {
					"type": "0", //  必填，类型，		0:日；1：周；2：月；3：第一季度；4：第二季度；5：第三季度；6：第四季度；7：上半年；8：下半年；9：年报；
					"startDate": "", // 日、周 该字段必填
					"endDate": "", // 周必填
					"month": "", // 月必填
					"year": "" // 各个季度、上下半年、年报必填
				}
				switch (getDateType) {
					case 1:
						dateValFormat = dateVal.format('YYYY-MM-DD');
						state.queryParams = {
							...state.queryParams,
							type: String(getDateType - 1),
							startDate: dateValFormat,
						}
						break;
					case 2:
						const weekday = new Date(val).getDay()
						const weS = weekday === 0 ? -1 : 0
						let startWeek = dayjs(val).add(weS, 'week').startOf("week").add(1, "day").format(
								'YYYY-MM-DD'),
							endWeek = dayjs(val).add(weS, 'week').endOf('week').add(1, 'day').format(
								'YYYY-MM-DD');
						state.weekStart = startWeek
						state.weekEnd = endWeek
						dateValFormat = `${startWeek},${endWeek}`

						state.queryParams = {
							...state.queryParams,
							type: String(getDateType - 1),
							startDate: startWeek,
							endDate: endWeek,
						}
						break;
					case 3:
						dateValFormat = dateVal.format('YYYY-MM');
						state.queryParams = {
							...state.queryParams,
							type: String(getDateType - 1),
							month: dateValFormat
						}
						break;
					case 4:
						dateValFormat = dateVal.format('YYYY');
						state.queryParams = {
							...state.queryParams,
							type: String(getDateType - 1),
							year: dateValFormat
						}
						break;
					default:
						dateValFormat = dateVal.format('YYYY');
						state.queryParams = {
							...state.queryParams,
							type: String(getDateType - 1),
							year: dateValFormat
						}
						if (getDateType == 8) {}
						if (getDateType == 10) {}

						break;
				}
				initData();
			};

			const clickSearch = () => {
				initData();
			};
			const handleAreaSelect = (val, option) => {
				// console.log(val, option);
				state.areaName = option.label;
				initData();
			};
			const handleDateSlc = (val, opt) => {
				// console.log('val', val);
				// console.log('opt', opt);
				state.queryParams = {
					"type": "0", //  必填，类型，		0:日；1：周；2：月；3：第一季度；4：第二季度；5：第三季度；6：第四季度；7：上半年；8：下半年；9：年报；
					"startDate": "", // 日、周 该字段必填
					"endDate": "", // 周必填
					"month": "", // 月必填
					"year": "" // 各个季度、上下半年、年报必填
				}
				nowType = val

				switch (val) {
					case 1:
						state.date1 = dayjs().endOf('day');
						state.queryParams = {
							...state.queryParams,
							type: String(val - 1),
							startDate: state.date1.format("YYYY-MM-DD")
						}
						state.titleSet = '日'
						break;
					case 2:
						const weekday = new Date().getDay()
						const weS = weekday === 0 ? -1 : 0
						let startWeek = dayjs().add(weS, 'week').startOf("week").add(1, "day").format(
								'YYYY-MM-DD'),
							endWeek = dayjs().add(weS, 'week').endOf('week').add(1, 'day').format(
								'YYYY-MM-DD');
						state.weekStart = startWeek;
						state.weekEnd = endWeek;
						state.date1 = dayjs().endOf('week');
						state.queryParams = {
							...state.queryParams,
							type: String(val - 1),
							startDate: startWeek,
							endDate: endWeek
						}
						state.titleSet = '周'
						break;
					case 3:
						state.date1 = dayjs().endOf('month');
						state.queryParams = {
							...state.queryParams,
							type: String(val - 1),
							month: state.date1.format("YYYY-MM")
						}
						state.titleSet = '月'
						break;
					case 4:
						state.date1 = dayjs().endOf('year');
						state.queryParams = {
							...state.queryParams,
							type: String(val - 1),
							year: state.date1.format("YYYY")
						}
						state.titleSet = '一季度'

						break;
					default:
						if (val == 5) {
							state.titleSet = '二季度'

						} else if (val == 6) {
							state.titleSet = '三季度'

						} else if (val == 7) {
							state.titleSet = '四季度'

						} else if (val == 8) {
							state.titleSet = '上半年'


						} else if (val == 9) {
							state.titleSet = '下半年'

						} else if (val == 10) {
							state.titleSet = '年'

						}

						state.date1 = dayjs().endOf('year');
						state.queryParams = {
							...state.queryParams,
							type: String(val - 1),
							year: state.date1.format("YYYY")
						}
						break;
				}
				initData();
			};
			const resetting = () => {
				state.nodeId = '';
				state.date.pitchData = {
					startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
					endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
				};
				clickSearch();
			};
			return {
				area,
				clickSearch,
				...toRefs(state),
				handleAreaSelect,
				exportWord,
				resetting,
				dateSlcFunc,
				disabledDateStart,
				handleDateSlc,
			};
		},
	});
</script>
<style>
	.el-popper.is-pure {
		background-color: #333 !important;
	}

	.el-picker-panel {
		color: #ccc !important;
	}
</style>
<style lang="less" scoped>
	.report-box {
		background: url(@/assets/images/report/bg.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		// overflow: hidden;
	}

	.search-box {
		margin-top: 1%;
		padding-left: 30px;
		display: flex;
		align-items: center;
	}

	.types_wrap {
		position: relative;
		// width: 50px;
		// height: 30px;
		margin-left: 1%;
		display: flex;
		align-items: center;
	}

	.file_type {
		padding: 10px 20px;
		border-radius: 4px;
		background-color: @white-color;
		position: absolute;
		width: 150px;
		left: 50%;
		margin-left: -75px;
		top: 40px;

		&>div {
			color: #037bff;
			cursor: pointer;
		}

		.tipsfun(@white-color, 10px, bottom, -18px, 50%);
	}

	:deep .el-input__wrapper {
		background: transparent !important;
		color: white;
	}

	:deep .el-input__wrapper {
		background-color: #ffffff00;
		box-shadow: 0px 0px 0px;
	}

	:deep .el-select {
		--el-select-border-color-hover: none;
		--el-select-input-focus-border-color: none;
	}

	:deep .ant-picker-cell-disabled {
		color: rgb(173, 173, 173);
		background-color: #bebebe15;
	}

	:deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
		background-color: #ffffff00;
		border-color: #ffffff00;
		border: none;
	}

	:deep .ant-select-selection-item {
		background-color: #ffffff00;
		border-color: #ffffff00;
		color: white;
	}

	:deep(.ant-select-dropdown) {
		background: url(@/assets/images/components/customDatePicker/bg1.png) no-repeat;
		background-size: 100% 100%;
	}

	// :deep(.el-date-picker){
	//   color: #fff !important;
	// }
</style>